<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
       symbolsArray: [
        { symbol: 'btcusdt', title: 'BTC/USDT' },
        { symbol: 'ethusdt', title: 'ETH/USDT' },
        { symbol: 'eosusdt', title: 'EOS/USDT' },
        { symbol: 'crousdt', title: 'CRO/USDT' },
        { symbol: 'trxusdt', title: 'TRX/USDT' }
      ]
    }
  },
  created() {
    this.$store.dispatch('WEBSOCKET_INIT', 'wss://www.huobi.ge/-/s/pro/ws')
    let Interval = setInterval(() => {
      if (this.$store.state.websocket.is_open_socket) {
        this.loadTopMarket()
        clearInterval(Interval)
      }
      console.log(this.$store.state.websocket.is_open_socket)
    }, 300)
  },
  methods: {
    //  最新市场概要快照
    loadTopMarket() {
      this.symbolsArray.forEach(item => {
        let ch = `market.${item.symbol}.detail`
        let data = {
          sub: ch,
          id: Date.now() + ''
        }
        // 发送消息
        this.$store.dispatch('WEBSOCKET_SEND', JSON.stringify(data))
        let ch2 = `market.${item.symbol}.trade.detail`
        let data2 = {
          sub: ch2,
          id: 'id1'
        }
        this.$store.dispatch('WEBSOCKET_SEND', JSON.stringify(data2))
      })
    }
  }
}
</script>
<style lang="less">
#app {
  font-size: 12px;
  line-height: inherit;
  .van-grid-item__content::after {
    border-width: 0;
  }

  //  全局导航栏样式
  .van-nav-bar--fixed {
    border-bottom: 1px solid #e5e5e5;
  }
  .van-nav-bar .van-icon {
    color: rgb(0, 0, 0);
    font-size: 20px;
  }
  .van-nav-bar__title {
    font-weight: 700;
  }
  .boxflex {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  .green {
    color: #1cad90;
  }

  .red {
    color: #cd4e65;
  }
}
</style>
